/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-09 16:34:03
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-11-09 22:10:19
 * @FilePath: /three-react/src/pages/CurveGeometry/Line1.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useEffect, useRef } from "react"
import createRender from '@/createRender';
import * as THREE from 'three'

const state = {}
export default function Page() {
  
  const container = useRef(null);
  useEffect(() => {
    if (!state.isMounted) {
      createRender(container)(render);
      state.isMounted = true;
    }
  }, [])



  function render(scene) {
   
    // 样条曲线生成管道模型
    const path = new THREE.CatmullRomCurve3([
      new THREE.Vector3(-50, 20, 90),
      new THREE.Vector3(-10, 40, 40),
      new THREE.Vector3(0, 0, 0),
      new THREE.Vector3(60, -60, 0),
      new THREE.Vector3(70, 0, 80)
    ])

   
    // 贝塞尔曲线生成管道模型
    // const p1 = new THREE.Vector3(-80, 0, 0);
    // const p2 = new THREE.Vector3(20, 100, 0);
    // const p3 = new THREE.Vector3(80, 0, 100);
    // const curve = new THREE.CubicBezierCurve3(p1, p2, p3)


    // CurvePath生成管道模型
    const p1 = new THREE.Vector3(0, 0,100)
    const p2 = new THREE.Vector3(0, 0,30);
    const p3 = new THREE.Vector3(0, 0,0);
    const p4 = new THREE.Vector3(30, 0, 0);
    const p5 = new THREE.Vector3(100, 0, 0);
    const line1 = new THREE.LineCurve3(p1, p2);
     const curve = new THREE.QuadraticBezierCurve3(p2, p3, p4)
    const line2 = new THREE.LineCurve3(p4, p5);
   
    const curvePath = new THREE.CurvePath();
    curvePath.curves.push(line1, curve, line2);



    const geometry = new THREE.TubeGeometry(curvePath, 30, 20, 16)
    // const material = new THREE.LineBasicMaterial({
    //   color: 0xff0000,
    // })

    const material = new THREE.MeshLambertMaterial({
      color: 0xfff000,
      side: THREE.DoubleSide
    })
    const mash = new THREE.Mesh(geometry, material) 
    scene.add(mash);
  }

  return (
    <div id="container" className="full container" ref={container}></div>
  )
}